第三天來到囉,今天的內容比較簡單一點,利用js去控制css3的變數數值,進而改變畫面的更新。
先上demo,這次主要在一張圖片上,用變數去更新padding、background-color以及blur。html部分先設定三個input分別控制剛剛所提到的三項屬性,以及加上一張自己想放的圖片,input上加上data-sizing='px',是為了js之後去更改數值時,要抓取到的單位名,順帶一提第一次用到type='range'跟type='color'屬性,感覺好特別XD
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
css部分:
css將想要寫的變數都放在:root當中,變數名以--作為開頭,而要使用這些變數時,就以var為開頭,後面加上想要的變數名稱,以下為code範例
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
js部分:
先選擇到所有的input,然後監聽他們的mousemove跟change事件,如果只監聽change事件的話,在移動range的input時並不會即時的更新畫面,而是要移動完成滑鼠放開值改變後才會更新畫面,所以加上mousemove的監聽。以下為code部分
//選擇所有input
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
//這邊的this會指向input,dataset.sizing是自己加在input上的data-sizing
//改變顏色的input並沒有dataset-sizing這個屬性,所以加上'',如果沒有加會變成undefined,就出錯了
const suffix = this.dataset.sizing || '';
//這邊會抓取到<html>,然後設定更改後input的值到html上,進而改變變數的數值
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
//將每個input元素監聽change及mousemove事件 都去觸發更新的函示
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
以上就是第三天內容!還剩27天QQ